<template>
  
    <div class="app">
     
        <!-- 导航区 -->
         <div class="navigate">
            <div >             
              <RouterLink class="size" to="/discover"><i class="iconfont icon-faxian">  发现</i></RouterLink>
            </div>
            <div >
              <RouterLink class="size" to="/release"><i class="iconfont icon-fabu">  发布</i></RouterLink>
            </div>
            <div >
              <RouterLink class="size" to="/notice"><i class="iconfont icon-tongzhi">  通知</i></RouterLink>
            </div>
            <div >
              <RouterLink class="size" to="/myself"><i class="iconfont icon-wode">  我的</i></RouterLink>
            </div>
            <div >
            <RouterLink class="size" to="/more"><i class="iconfont icon-gengduo">   更多</i></RouterLink>
            </div>
         </div>
         <button @click="openModal" class="loginpage">登录</button>

      <LoginModal :isVisible="isModalVisible" @close="closeModal" />
    </div>
  </template>
  
  
  <script>

import LoginModal from "@/components/LoginModal.vue";

export default {
  name: 'side-bar',
  components: {
    LoginModal,
  },
  data() {
    return {
      isModalVisible: false,
    };
  },
  methods: {
    openModal() {
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    },
  },
};
</script>

  
  <style scoped>
.app{
  position: relative;
}

.navigate{
    width: 237.25px;
    height: 100%;
    padding-left: 20px;
    margin-top: 50px;
}

.size{
    display: block;
    color: #000000 !important;
    width: 100%;
    height: 47.99px;
    font-size: 30px;   
}
.gengduo{
    display: flex;
    bottom: 100px;
}

.loginpage {
  margin-top: 10px;
  width: 237px;
  height: 47.99px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: red;
  border-radius: 10px;
  color: white;
}
  </style>